<#assign propsJson="${propsJson}"?eval />
<template>
  <div style="width: 100%; height: 100%" ref="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      echarts: null,
      circleColor: [<#list propsJson.circleColor as circleColor>
          <#if circleColor?is_string>
          "${circleColor}"<#if circleColor_has_next>,</#if><#else><#assign colorkeys=circleColor?keys />
          {
          <#list colorkeys as key>
            <#if circleColor[key]?is_string>
            ${key}: "${circleColor[key]}"<#if key_has_next>,</#if>
            <#elseif circleColor[key]?is_number || circleColor[key]?is_boolean> 
            ${key}: ${circleColor[key]?string}<#if key_has_next>,</#if>
            <#else>
            ${key}: [<#list circleColor[key] as colorItem>
              {<#list colorItem?keys as ck>
                <#if colorItem[ck]?is_string>${ck}: "${colorItem[ck]}"<#else>${ck}: ${colorItem[ck]?string}</#if><#if ck_has_next>,</#if>
              </#list>}<#if colorItem_has_next>,</#if></#list>
            ]<#if key_has_next>,</#if>
            </#if>
          </#list>
          },
        </#if></#list>],
      model: [
        <#list modelJson as Item>
          <#assign ItemKeys=Item?keys />
          {
            <#list ItemKeys as ItemKey>
              <#if Item[ItemKey]?is_number || Item[ItemKey]?is_boolean>
                ${ItemKey}: ${Item[ItemKey]?string}
              <#elseif Item[ItemKey]?is_string>
                ${ItemKey}: "${Item[ItemKey]?string}"
              </#if>
              <#if ItemKey_has_next>,</#if>
            </#list>
          }<#if Item_has_next>,</#if>
        </#list>
      ]
    };
  },
  methods: {
    formatModelData() {
      const seriesDataObj = {};
      this.model.forEach(v => {
        seriesDataObj[v.name] = {};
        const obj = seriesDataObj[v.name];
        obj.name = v.name;
        obj.value = v.value;
        obj.subProps = [];
        for (let key in v) {
          if (!["name", "value"].includes(key)) {
            obj.subProps.push({ name: key, value: v[key] });
          }
        }
      });
      return seriesDataObj;
    },
    baseOptions() {
      const formatModelData = this.formatModelData();
      return {
        color: this.circleColor,
        title: {
          text: "${propsJson.titleText}",
          left: "${propsJson.titleHorizonAlign}",
          show: true,
          textStyle: {
            color: "${propsJson.titleColor}",
            fontSize: ${propsJson.titleSize},
            fontWeight: "normal",
          },
        },
        legend: {
          left: 0,
          top: "55%",
          orient: "vertical",
          itemGap: 20,
          formatter: function(name) {
            const { value } = formatModelData[name];
            let title = "{title|" + name + "：" + value + "}\n";
            formatModelData[name].subProps.forEach((prop, i) => {
              title += "{subTitle" + (i + 1) + "|" + prop.name + "：" + prop.value + "}";
            });
            return title;
          },
          textStyle: {
            padding: [0, 10],
            rich: {
              title: {
                color: "#fff",
                lineHeight: 35,
                fontSize: 14,
              },
              subTitle1: {
                color: "rgba(255, 255, 255, 0.5)",
                width: 100,
              },
              subTitle2: {
                color: "rgba(255, 255, 255, 0.5)",
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            radius: ["${propsJson.circleInnerRadius}%", "${propsJson.circleOutterRadius}%"],
            center: ["25%", "30%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: this.model.map(v => ({ name: v.id, ...v })),
          },
        ],
      };
    },
    renderEcharts(){
        this.echarts = echarts.init(this.$refs.echarts)
        this.echarts.setOption(this.baseOptions())
    },
    resize(){
        this.echarts.resize()
    }
  },
  mounted(){
    this.$nextTick(function(){
      this.renderEcharts()
    })
  },
};
</script>

<style scoped></style>
